<template>
  <div class="main">
    <div class="title">快 捷 键 编 辑</div>
    <div class="content">
      <div class="selections">
        <div>
          <span>选 择 键 值</span
          ><select name="" id="">
            <option value="">快捷键一</option>
          </select>
        </div>
        <div>
          <span>选 择 功 能</span
          ><select name="" id="">
            <option value="">主机播放音乐</option>
          </select>
        </div>
        <div>
          <span>播 放 模 式</span
          ><select name="" id="">
            <option value="">单曲播放</option>
          </select>
        </div>
      </div>
      <div class="tables">
        <div class="table1">
          <div class="tableContent">
            <el-table :data="modifyKeyData" style="width: 100%">
              <el-table-column type="index" min-width="10"> </el-table-column>
              <el-table-column
                prop="deviceNumber"
                label="设备号"
                min-width="30"
              >
              </el-table-column>
              <el-table-column
                prop="deviceName"
                label="设备名称"
                min-width="30"
              >
              </el-table-column>
              <el-table-column prop="selection" label="选择"> </el-table-column>
            </el-table>
          </div>
          <div class="addORdelete">
            <button>添 加 设 备</button>
            <button>删 除 设 备</button>
          </div>    
        </div>
        <div class="table2">
          <div class="tableContent">
            <el-table :data="modifyKeyData" style="width: 100%">
              <el-table-column type="index" min-width="10"> </el-table-column>
              <el-table-column
                prop="deviceNumber"
                label="设备号"
                min-width="30"
              >
              </el-table-column>
              <el-table-column
                prop="deviceName"
                label="设备名称"
                min-width="30"
              >
              </el-table-column>
              <el-table-column prop="selection" label="选择"> </el-table-column>
            </el-table>
          </div>
          <div class="addORdelete">
            <button>添 加 设 备</button>
            <button>删 除 设 备</button>
          </div>
        </div>
      </div>
      <div class="saveORback"><button>保 存</button><button @click="back">返 回</button></div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const router=useRouter();
const back=()=>{
    router.back()
}
const modifyKey = ref([
  {
    deviceNumber: "1号",
    deviceName: "设备一号",
    selection: "选择",
  },
  {
    deviceNumber: "2号",    
    deviceName: "设备二号",
    selection: "选择",
  },
]);
</script>
<style scoped>
@import url("./Keyboard_detail.less");
</style>